import { Component, OnInit, Input, Output, OnChanges, SimpleChanges, EventEmitter } from '@angular/core';
import { optionsData, seriesData } from "../../farm-power-assess/assess-column-echart/echarts.model";

@Component({
	selector: 'app-performance-columun-chart',
	templateUrl: './performance-columun-chart.component.html',
	styleUrls: ['./performance-columun-chart.component.css']
})
export class PerformanceColumunChartComponent implements OnInit {

	/**
	   * echarts实例对象
	   * 
	   * @private
	   * @type {*}@memberof CompareEchartsComponent
	   */
	private echartsIntance: any = null;

	/**
	 * 父组件输入echarts参数
	 * 
	 * @private
	 * @type {*}@memberof CompareEchartsComponent
	 */
	@Input() series: seriesData[];
	@Input() xAxisData: string[] = [];

	// 传入父组件的farmId
	@Output() onFarmColumnClick = new EventEmitter<number>();

	options: optionsData;
	tooltip: object;
	xAxis: object;
	yAxis: any[];
	grid: object;
	legend?: object;
	isFirst: boolean = true;

	constructor( ) { }

	ngOnInit() {
		
	}

	ngOnChanges(changes: SimpleChanges) {

		if (changes['series'] && changes['series'].currentValue) {
			if (!this.isFirst) {
				this.updateEchart();
			} else {
				this.isFirst = false;
				this.initOptions();
			}
		}
		if (changes['xAxisData'] && changes['xAxisData'].currentValue) {
			if (!this.isFirst && this.echartsIntance) {
				this.options.xAxis['data'] = this.xAxisData;
				this.options.series = this.series;
				this.echartsIntance.setOption(this.options, true);
			} else {
				this.isFirst = false;
				this.initOptions();
			}
		}
	}

	initOptions() {
		this.tooltip = {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				crossStyle: {
					color: '#999'
				}
			}
		},
		this.legend = {
			data: [
			]
		}
		this.grid = {
			left: '3%',
			right: '2%',
			bottom: '10%',
			containLabel: true
		},
		this.xAxis = {
			type: 'category',
			data: this.xAxisData,
			axisPointer: {
				type: 'shadow'
			},
			axisLine: {
				lineStyle: {
					color: '#35789d',
					width: 2
				}
			},
			axisLabel: {
				show: true,
				textStyle: {
					color: '#43a0b3',
					fontSize: 12
				},
				margin: 10,
			},
		},
		this.yAxis = [
			{
				type: 'value',
				name: '利用率',
				axisLabel: {
					formatter: '{value} %',
					textStyle: {
						color: '#43a0b3'
					},
				},
				axisLine: {
					lineStyle: {
						color: '#35789d',
						width: 2
					}
				},
				axisTick: {
					show: false
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: '#1b4268',

					}
				}

			}
		]
		if (this.options == null) {
			this.options = {
				tooltip: this.tooltip,
				grid: this.grid,
				xAxis: this.xAxis,
				yAxis: this.yAxis,
				legend: this.legend,
				series: this.series
			};
		}
	}

	/**
	 * 初始化echarts实例
	 * 
	 * 
	 * @memberof CompareEchartsComponent
	 */
	onChartInit(ec: any) {
		this.echartsIntance = ec;
		ec.on('click',(params)=>{
			let farmId = params.data.id;
			this.onFarmColumnClick.emit(farmId);
		})
	}

	/**
	 * 更新echarts实例数据
	 * 
	 * 
	 * @memberof CompareEchartsComponent
	 */
	updateEchart() {
		if (this.echartsIntance != null) {
			this.options.tooltip = this.tooltip;
			this.options.series = this.series;
			this.echartsIntance.setOption(this.options);
			
		};
	}

}



// WEBPACK FOOTER //
// ./src/app/module/performance/performance-list/performance-columun-chart/performance-columun-chart.component.ts